<template>
  <view class="login-prompt">
    <view class="prompt-title">提示</view>
    <view class="prompt-content">请先登录以使用该功能</view>
    <view class="prompt-btns">
      <button class="login" @click="handleGoLogin">去登录</button>
    </view>
  </view>
</template>

<script setup>
  import {
    defineProps,
    defineEmits
  } from 'vue';
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    }
  });
  const emits = defineEmits(['go-login']);
  const handleGoLogin = () => {
    emits('go-login');
  }
</script>

<style lang="scss">
  .login-prompt {
    text-align: center;

    .prompt-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }

    .prompt-content {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 40rpx;
      line-height: 1.5;
    }

    .prompt-btns {
      .login {
        background: #e1383c;
        color: #fff;
        padding: 10rpx;
        text-align: center;
        border-radius: 16rpx;
        font-size: 28rpx;
        width: 200rpx;
        height: 80rpx;
      }
    }
  }
</style>